<template>
	<h1>验证码</h1>
	<div class="form-group" style="display: flex;">
		<div>
			<span>验证码：</span>
			<input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码" />
		</div>
		<div class="login-code" @click="refreshCode">
			<!--验证码组件-->
			<s-identify :identifyCode="identifyCode"></s-identify>
		</div>
	</div>
</template>

<script>
	import SIdentify from '../components/text/sidentify.vue'

	export default {
		name: "text",
		components: {
			SIdentify
		},
		created() {
			//初始化验证码
			this.refreshCode();
		},
		data() {
			return {
				identifyCodes: '+-+-',
				identifyCode: '',
				cs: '12+3',
				
				code: "", //text框输入的验证码
			}
		},
		mounted() {
		},
		methods: {
			//验证码
			randomNum(min, max) {
				let num = Math.floor(Math.random() * (max - min) + min);
				return num;
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				//随机两个数
				let num1 = this.randomNum(10,30);
				let num2 = this.randomNum(10,30);
				let num3 = this.randomNum(0,3);
				if(num1 > num2){
					this.identifyCode = num1 +  this.identifyCodes[num3] + num2;
				}else{
					this.identifyCode = num2 +  this.identifyCodes[num3] + num1;
				}
				console.log('identifyCode:' + this.identifyCode);
			},
		}
	}
</script>

<style>
	.code {
		width: 124px;
		height: 31px;
		border: 1px solid rgba(186, 186, 186, 1);
	}

	.login-code {
		cursor: pointer;
	}
</style>
